<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-28 20:18:55
 * @LastEditTime: 2024-03-18 15:35:22
 * @FilePath: \env-manager-pc\src\views\data_query\power_off\power.off.detail.vue
-->

<script setup lang="ts">
import dayjs from 'dayjs'
import dataQueryApi from '@/api/modules/data.query'
import { usePage } from '@/utils/commonHook'
import useKeepAliveStore from '@/store/modules/keepAlive'

const keepAliveStore = useKeepAliveStore()

onBeforeRouteLeave((to) => {
  if (to.name !== 'data-power-off-list') {
    keepAliveStore.remove('DataPowerOffList')
  }
})

interface TimeRangeType {
  startTime: string
  endTime: string
}

const entData = reactive(sessionStorage.getItem('ent_power_off') ? JSON.parse(sessionStorage.getItem('ent_power_off') as string) : {},
)

// const router = useRouter()
const route = useRoute()
const deviceId = route.params.id as string
const { page, pageNumChange, pageSizeChange } = usePage(getTableData)

const timeRange = reactive<TimeRangeType>({
  startTime: dayjs(route.query.startTime as string).format('YYYYMMDD'),
  endTime: dayjs(route.query.endTime as string).format('YYYYMMDD'),
})

const tiemValue = computed({
  set: (values) => {
    const realValues = values || []
    timeRange.startTime = realValues[0]
    timeRange.endTime = realValues[1]
  },
  get: () => {
    return [timeRange.startTime, timeRange.endTime]
  },
})

const tableData = ref<any[]>([])
const loading = ref(false)
async function getTableData() {
  loading.value = true
  const res = await dataQueryApi.GetPowerSupplyList({
    startTime: timeRange.startTime,
    endTime: dayjs(timeRange.endTime).add(1, 'day').format('YYYYMMDD'),
    deviceIDs: [deviceId],
    pageSize: page.PageSize,
    pageNum: page.PageNum,
  })
  loading.value = false
  // console.log('%c [ res ]-27', 'font-size:13px; background:pink; color:#bf2c9f;', res)
  const { PowerSupplys, Devices, RecordsetCount } = res
  const rows = PowerSupplys.map((item: any) => {
    return {
      ...item,
      device: Devices[deviceId],
    }
  })
  tableData.value = rows || []
  page.RecordsetCount = RecordsetCount
}

getTableData()

function renderTipText(row: any) {
  const eventType = row.PowerOn ? '<span class=text-success>上电</span>' : '<span class=text-danger>停电</span>'
  return `${row.device?.Name}于${row.StartTime}${row.EndTime ? `到${row.EndTime}发生` : '开始'}${eventType}`
}
</script>

<template>
  <div>
    <PageHeader>
      <template #content>
        <div class="flex">
          <div>
            <ElDatePicker v-model="tiemValue" value-format="YYYYMMDD" type="daterange" :clearable="false" @change="getTableData" />
          </div>
          <el-tag v-if="entData.EntName" class="ml-10px" size="large" type="primary">
            企业：{{ entData.EntName }}
          </el-tag>
        </div>
      </template>
    </PageHeader>
    <PageMain>
      <div v-auto-height="85">
        <vxe-table
          auto-resize border
          height="100%"
          :data="tableData"
          :loading="loading"
          :row-config="{ isCurrent: true }"
        >
          <VxeColumn type="seq" title="序号" width="80" />
          <VxeColumn field="PowerOn" title="类型" width="100">
            <template #default="{ row }">
              <span v-if="row.PowerOn" class="text-success">上电</span>
              <span v-else class="text-danger">停电</span>
            </template>
          </VxeColumn>
          <VxeColumn field="StartTime" title="时间" width="180" />
          <VxeColumn field="EntName" title="备注">
            <template #default="{ row }">
              <div v-html="renderTipText(row)" />
            </template>
          </VxeColumn>
        </vxe-table>
      </div>
      <ElPagination
        class="mt-4"
        :page-size="page.PageSize"
        :total="page.RecordsetCount"
        :current-page="page.PageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[20, 50, 100]"
        @current-change="pageNumChange"
        @size-change="pageSizeChange"
      />
    </PageMain>
  </div>
</template>
